<template>
  <Card>
    <div style="overflow: hidden; height: 40px;">
      <Input v-model="searchValue" search enter-button placeholder="请输入关键字……" style="float: right; width: 250px;"
             @on-change="getGoods"/>
    </div>
    <Table :columns="columns" :data="dataList" style="margin-top: 10px;"></Table>
    <div class="page">
      <Page :total="pageTotal" :page-size="pageSize" :current="pageNum" @on-change="changePage"></Page>
    </div>
    <Modal v-model="factoryModal">
      <p slot="header">
        <span>厂商信息</span>
      </p>
      <Form :label-width="100">
        <FormItem label="厂商名称：">
          <span>{{factory.factoryName}}</span>
        </FormItem>
        <FormItem label="地址：">
          <span>{{factory.address}}</span>
        </FormItem>
        <FormItem label="联系人：">
          <span>{{factory.people}}</span>
        </FormItem>
        <FormItem label="联系方式：">
          <span>{{factory.relations}}</span>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="factoryModal = false">关闭</Button>
      </div>
    </Modal>
  </Card>
</template>

<script>
  export default {
    name: "Good",
    data() {
      return {
        // 页码
        pageNum: 1,
        // 页大小
        pageSize: 10,
        // 页总数
        pageTotal: 0,
        // 搜索信息
        searchValue: "",
        // 厂商id
        factoryId: null,
        // 表数据
        dataList: [],
        // 表头
        columns: [
          {
            title: "编号",
            key: "id"
          }, {
            title: "名称",
            key: "name"
          }, {
            title: "单价",
            key: "price"
          }, {
            title: "版本",
            key: "version"
          }, {
            title: "描述",
            key: "description"
          }, {
            title: "备注",
            key: "note"
          }, {
            title: "操作",
            key: "action",
            width: 250,
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary'
                  },
                  on: {
                    click: () => {
                      this.factory = params.row.factory;
                      this.factoryModal = true;
                    }
                  }
                }, '查看厂商'),
                h('Button', {
                  props: {
                    type: 'success'
                  },
                  style: {
                    "margin-left": "10px",
                  },
                  on: {
                    click: () => {
                      this.$router.push({
                        path:"/buy",
                        query:{
                          goodId: params.row.id,
                        }
                      });
                    }
                  }
                }, '购买商品'),
              ])
            }
          }
        ],
        // 厂商信息
        factory: {
          factoryName: "",
          address: "",
          people: "",
          relations: "",
        },
        // 厂商模态框
        factoryModal: false,
      }
    },
    methods: {
      // 翻页
      changePage (pageNo) {
        // 更改当前页
        this.pageNum = pageNo;
        // 重新获取数据
        this.getGoods();
      },
      // 获取商品
      getGoods() {
        this.$requests.get("/good/getAllGoods", {
          search: this.searchValue,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          factoryId: this.factoryId
        }).then(res => {
          if (res.data.code === 0) {
            this.dataList = res.data.data.list;
            this.pageTotal = res.data.data.total;
            this.pageNum = res.data.data.pageNum;
          } else {
            this.$Message.error(res.data.msg);
          }
        })
      }
    },
    created() {
      this.factoryId = this.$route.query.factoryId;
      this.getGoods();
    }
  }
</script>

<style lang="less" scoped>
  .page {
    margin-top: 10px;
    text-align: right;
  }
</style>
